<template>
  <div>
      <div class="container">
        <h5 style="font-size:15px;color:#333333">
          <img src="@/assets/helpServerIcon/red.png" style="height:14px;display:inline-block;margin-right:10px;font-weight:100;width: 2vw;"/>文章推荐</h5>
        <ul class="articleList" >
          <li v-for="(item,index) in article" :key="index" style="box-shadow: 0px 2px 6px rgba(118,118,118,.3)" @click="routeTo(item)">
            <router-link :to="'/articleDetail?article_id='+item.acticle_id" style="color:#333333">
              <img :src="item.image.img_url" alt="" class="articleImg" style="height: 51vw;">
              <div>
                <p style="margin: 0vw 1vw" class="title">{{item.article_title}}</p>
                <div style="padding: 0px 1vw;overflow:hidden">
                  <div class="headIcon"><img :src="item.head_ico" alt=""> </div>
                  <span class="headName">{{item.user_name}}</span>
                  <div class="thumbs">
                    <img src="@/assets/helpServerIcon/soucang.png" alt="" style="width:12px">
                    <span style="width:12px">{{item.thumbs_num}}</span>
                  </div>
                </div>
              </div>
           </router-link>
          </li>
        </ul>
      </div>
  </div>
</template>

<script>

    export default {
      name: "article",
      data(){
        return{
          display:false,

        }
      },
      inject:["reload"],
      components:{
      },
      props:['article'],
      watch:{
        '$route'(to, from) {   
                this.$router.go(0);   
        }
      },
      methods:{
        router(){
          window.location.href="http://www.napin.com/download.html"
        },
        routeTo(item){
          this.$router.push({
            path:'articleDetail',query:{article_id:item.acticle_id}
          })
          this.reload();
        }
      },
      mounted(){

      }
    }
</script>

<style scoped lang="scss">
  // .file-lists{
  //   width: 100%;
  //   height: 100%;
  // }
 /* @media screen and (min-width: 320px) and (max-width: 376px){
    .title{
      height: 14vw !important;
    }
  }*/
  .container{
    border-bottom:1px solid #cecece;
    margin-bottom:15vw;
    width: 100vw;
    height: auto;
    margin-top: 2vw;
  }
.articleList{
  .articleImg{
    width: 100%;
    height: 51vw;
    overflow: hidden;
  }
    li{
        border-radius: 5px;
        overflow: hidden;
      width: 42vw;
        display:inline-block;
        margin: 2vw 2vw 0 3vw;
        img{
          width:100%;
        }
      .title{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 11vw;
        line-height: 5.5vw;
      }
        .headIcon{
            width:6vw;
            height:6vw;
            border-radius: 50%;
            overflow: hidden;
            float:left;
            img{
                width: 100%;
            }
        }
    }
}
.headName{
    font-size:12px;
    transform: scale(.83);
    display:inline-block;
    vertical-align: middle;
    // width:
}
.thumbs{
    float:right;
    // width:50px;
    img{
        display: inline-block;
    }
}
</style>
